<template>
  <div class="noticeBackground">
    <div style="width: 80%; margin: auto;">
      <h2 style="margin-bottom: 20px; padding-left: 40px; font-size: 25px; font-weight: bold; color: lightpink">系统公告</h2>
      <el-timeline class="notice-box">
        <el-timeline-item v-for="item in data.noticeList" :key="item.id" :timestamp="item.time" placement="top">
          <div class="card">
            <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px;">{{ item.title }}</div>
            <div style="color: dimgrey">{{ item.content }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  noticeList: [
    {color: null},
  ],
  film: [],
})

request.get('/notice/selectAll').then(res => {
  data.noticeList = res.data
})

</script>

<style>
.notice-box{
  height: 800px;
  overflow-y: scroll;
}

.noticeBackground {
  width: 100%;
  padding: 20px;
  background-image: url("@/assets/imgs/sunset.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.notice-box::-webkit-scrollbar {
  width: 0;
}
</style>